<template>
	<view class="payment">
		<!-- #ifdef MP-WEIXIN -->
		<view class="header-phone-stauts-show"></view>
		<!-- #endif -->
		<!-- 标题栏 -->
		<cl-topbar background-color='#47C4D9' color='#fff' :border='false'>
			<template slot='prepend'>
				<view style="font-size: 36rpx;padding-bottom:5rpx;">会员码</view>
			</template>
		</cl-topbar>
		<!-- 百分比边框 -->
		<view class="info-container">
			<!-- 账户信息 -->
			<view class="payment-info">
				<span class='store-name'>田季麻辣烫</span>
				<view class="charge-info">
					<view class="left-charge charge-item">
						<span class='money'>30000元</span>
						<view class="btn-tip">
							账户明细
						</view>
					</view>
					<view class="right-charge charge-item">
						<span class='money'>9折</span>
						<view class="btn-tip">
							会员优惠
						</view>
					</view>
				</view>
				<view class="pend-info">
					<span class='text'>未支付订单金额：</span>
					<span class='money'>￥333.3</span>
				</view>
			</view>
			<!-- 二维码 -->
			<view class="qrcode">
				<span class='qrcode-tips'>非在线支付的会员出示会员码支付</span>
				<view class="qrcode-show">
					<view class="code-box">
						<!-- 二维码 -->
						<canvas canvas-id="qrcode" v-show="qrShow" style="width: 440rpx;height: 440rpx;" />
					</view>
				</view>
				<view class="refresh">
					点击刷新
				</view>
				<view class="btn-charge">
					立即充值
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import uQRCode from '@/common/uqrcode.js' //引入uqrcode.js
	export default {
		data() {
			return {
				qrShow: false
			}
		},
		mounted() {
			this.qrFun()
		},
		onLoad() {
			uni.loadFontFace({
				global: true,
				family: 'payment',
				source: 'url("/static/fonts/pages/payment/YouSheBiaoTiHei-2.ttf")',
				success() {
					console.log('会员码页面引用字体成功')
				},
				fail(e) {
					console.log('会员码页面' + e);
				}
			})
		},
		methods: {
			qrFun() {
				this.qrShow = true
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: 'nihao',
					size: 220,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.payment {
		font-family: 'mine';
		position: relative;
		width: 100%;
		height: 100vh;
		background-color: $white-notion;

		//微信小程序独有的头部展示
		.header-phone-stauts-show {
			width: 100%;
			height: 40rpx;
			background-color: $main-color;
		}

		.info-container {
			width: 100%;
			/* #ifndef MP-WEIXIN */
			height: calc(100% - 88rpx);
			/* #endif */
			/* #ifdef MP-WEIXIN */
			height: calc(100% - 128rpx);
			/* #endif */
			background-color: $main-color;

			.payment-info {
				width: 100%;
				height: 350rpx;
				display: grid;
				grid-template-rows: 100rpx auto 90rpx;

				.store-name {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 48rpx;
					font-weight: 700;
					letter-spacing: 4rpx;
					color: $white-notion;
				}

				.charge-info {
					position: relative;
					display: flex;
					align-items: center;

					&::after {
						position: absolute;
						content: "";
						display: block;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 1rpx;
						height: 90%;
						background-color: $white-notion;
					}

					.charge-item {
						flex: 1;
						height: 100%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.money {
							font-size: 36rpx;
							font-weight: 500;
							color: $white-notion;
						}

						.btn-tip {
							width: 160rpx;
							height: 60rpx;
							background-color: rgba(0, 0, 0, 0);
							border-radius: 72rpx;
							border: 1rpx solid $white-notion;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 24rpx;
							letter-spacing: 2rpx;
							font-weight: 300;
							color: $white-notion;
						}
					}
				}

				.pend-info {
					display: flex;
					align-items: center;
					justify-content: center;

					.text {
						font-size: 36rpx;
						font-weight: 500;
						color: $white-notion;
						letter-spacing: 2rpx;
					}

					.money {
						font-size: 48rpx;
						font-weight: 700;
						color: $number-rich;
					}
				}
			}

			.qrcode {
				width: 100%;
				height: calc(100% - 350rpx);
				background-color: $white-notion;
				border-radius: 72rpx 72rpx 0px 0px;
				display: grid;
				grid-template-rows: 1fr 500rpx 1fr 1.5fr;

				.qrcode-tips {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					font-weight: 400;
				}

				.qrcode-show {
					display: flex;
					align-items: center;
					justify-content: center;

					.code-box {
						width: 500rpx;
						height: 500rpx;
						background: rgba(246, 246, 246, 1);
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.refresh {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					font-weight: 400;
					letter-spacing: 4rpx;
					color: $charge-color-hui
				}

				.btn-charge {
					margin: 0 auto;
					width: 700rpx;
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 36rpx;
					font-weight: 500;
					letter-spacing: 4rpx;
					color: $white-notion;
					border-radius: 12rpx;
					background-color: $main-color;
					box-shadow: 0px 0px 4rpx 0px $shadow-color;
				}
			}
		}
	}
</style>
